<template>
  <section class="goodsClassify">
    <!--start 面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>设置</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--end 面包屑-->
    <div class="content">
      <!--start 新增下拉-->
      <div class="add">
        <transition name="fade">
          <div class="modal-backdrop" v-show="vue_add"></div>
        </transition>
        <transition name="slideDown">
          <div class="specific-search" v-show="vue_add">
            <div class="search-title">
              <p>新增商品分类</p>
            </div>
            <div class="form">
              <el-row>
                <el-col :span="11">
                  <el-form :model="addForm" :rules="rules" ref="addClassify" label-width="100px">
                    <el-form-item label="分类名称" prop="classify">
                      <el-input v-model="addForm.classify"></el-input>
                    </el-form-item>
                    <el-form-item label="上级分类" prop="parentClassify">
                      <el-select :disabled="addForm.disabled" v-model="addForm.parentClassify"
                                 :placeholder="addForm.placeholder">
                        <el-option label="分类一" value="分类一"></el-option>
                        <el-option label="分类二" value="分类二"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" :disabled="clickBtn" @click="addOk(goodsCategoryQb.categoryParentCode)">确定</el-button>
                      <el-button @click="addCancel">取消</el-button>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
            </div>
          </div>
        </transition>
      </div>
      <!--end 新增下拉-->
      <!--start 修改下拉-->
      <div class="add">
        <transition name="fade">
          <div class="modal-backdrop" v-show="vue_update"></div>
        </transition>
        <transition name="slideDown">
          <div class="specific-search" v-show="vue_update">
            <div class="search-title">
              <p>修改商品分类</p>
            </div>
            <div class="form">
              <el-row>
                <el-col :span="11">
                  <el-form :model="updateForm" :rules="rules" ref="updateClassify" label-width="100px">
                    <el-form-item label="分类名称" prop="classify">
                      <el-input v-model="updateForm.classify"></el-input>
                    </el-form-item>
                    <el-form-item label="上级分类" prop="parentClassify">
                      <el-select :disabled="updateForm.disabled" v-model="updateForm.parentClassify"
                                 :placeholder="updateForm.placeholder">
                        <el-option label="分类一" value="分类一"></el-option>
                        <el-option label="分类二" value="分类二"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="updateOk(goodsCategoryQb.categoryParentCode,goodsCategoryQb.categoryCode)">确定</el-button>
                      <el-button @click="updateCancel">取消</el-button>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
            </div>
          </div>
        </transition>
      </div>
      <!--end 修改下拉-->
      <ul class="wrapUl" ref="companyWrap">
        <li class="">
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="1">
              <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple textR">
                <el-button type="primary" @click="addBtnFn">新增</el-button>
              </div>
            </el-col>
          </el-row>
        </li>
        <li class="noWrapUl noBorder borderBottom rightPo">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            node-key="treeCode"
            ref="tree"
            :expand-on-click-node="false"
						:default-expanded-keys="expandTreeKeys"
						@node-expand="addKey"
						@node-collapse="deleteKey"
            :render-content="treeConentFn">
          </el-tree>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
  export default {
    data() {
      return {
      	clickBtn:false,                 //请求数据后禁用按钮	
        vue_add: false,
        vue_update: false,
        goodsCategoryQb:{
        	categoryCode: "",
        	categoryParentCode: ""
        },


        expandTreeKeys:[],
        addForm: {
          classify: "",
          parentClassify: "",
          placeholder: "根类别",
          disabled: true,
          code: "",
          level: ""
        },
        updateForm: {
          classify: "",
          parentClassify: "",
          placeholder: "",
          disabled: true
        },
        rules: {
          classify: [{required: true, message: '分类名称不能为空', trigger: 'blur'},
          {required: true,min:0,max:10,message: '分类名称不能超过十个字',trigger: 'blur'}],
          parentClassify: [{}]
        },
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'treeName'
        }
      }
    },
    methods: {
			addKey(data,node,dom){
				this.expandTreeKeys.push(node.key);
				document.querySelector(".noWrapUl").style.height = (document.documentElement.clientHeight - 180) + 'px';
			},
			deleteKey(data,node,dom){
				for(var i=0;i<this.expandTreeKeys.length;i++){
					if(this.expandTreeKeys[i]==node.key){
						this.expandTreeKeys.splice(i,1);
						break;
					}
				}
			},
      updateOk(categoryParentCode,code){
        this.$refs.updateClassify.validate((valid) => {
          if (valid) {
            this.axios({
              method: 'PUT',
              url: "/v3/goods/categorys/"+code,
              data: {
                "categoryName": this.updateForm.classify,
               	"categoryCode": categoryParentCode
              }
            }).then((res) => {
                this.queryTree();
                this.vue_update = false;
                this.$refs.addClassify.resetFields();
                this.Public.openSuccess(this,"操作成功！");
            }).catch((err)=>{
            		this.vue_update = false;
              	this.$refs.addClassify.resetFields();
            		this.Public.openError(this,err.response.data)
            });
          } else {
            this.openError('品牌名称不能为空');
            return false;
          }
        })
      },
      updateCancel(){
        this.vue_update = false;
        this.$refs.updateClassify.resetFields();
      },
      addBtnFn(){
        this.vue_add = true;
        this.addForm.placeholder = "根目录";
        this.goodsCategoryQb.categoryParentCode = "-1";
      },
      addOk(parentCode){
        this.$refs.addClassify.validate((valid) => {
          if (valid) {
          	this.clickBtn=!this.clickBtn;
            this.axios({
              method: 'post',
              url: "/v3/goods/categorys",
              data: {
                "categoryName": this.addForm.classify,
                "categoryParentCode": parentCode
              }
            }).then((res) => {
            		this.clickBtn=!this.clickBtn;
								this.queryTree();
                this.vue_add = false;
                this.$refs.addClassify.resetFields();
            }).catch((err)=>{
            		this.clickBtn=!this.clickBtn;
            		this.vue_add = false;
                this.$refs.addClassify.resetFields();
                this.Public.openError(this,err.response.data)
            });
          } else {
            return false;
          }
        })
      },
      addCancel() {
        this.vue_add = false;
        this.$refs.addClassify.resetFields();
      },
      addChildren(data){
        this.goodsCategoryQb.categoryParentCode = data.treeCode;
        this.addForm.placeholder = data.treeName;
        this.vue_add = true;
      },
      updateFn(node, data){
        if ("-1" == data.treeParentCode) {
          this.updateForm.placeholder = "根类别";
        } else {
          this.updateForm.placeholder = node.parent.label;
        }
        this.goodsCategoryQb.categoryCode = data.treeCode;
        this.updateForm.classify = data.treeName;
        this.vue_update = true;
      },
      stickFn(data){
        this.axios({
          method: 'PATCH',
          url: "/v3/goods/categorys/"+data.treeCode+"/stick"
        }).then((res) => {
            this.queryTree();
        }).catch((err)=>{
        		this.Public.openError(this,err.response.data)
        });
      },
      deleteFn(data){
        if ("0" != data.hasChildren) {
          //可删除
          this.$confirm('确认除此商品分类？', '确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
		          cancelButtonClass:"fr",
		          confirmButtonClass:"fr",
		          customClass:"clearfixBox"
          }).then(() => {
            //点击确定的回调
            this.axios({
              method: 'DELETE',
              url: '/v3/goods/categorys/'+data.treeCode
            }).then((res) => {
                this.queryTree();
            }).catch((err)=>{
                		this.Public.openError(this,err.response.data);
            });
          }).catch(() => {
            //点击取消的回调
          });
        }
      },
      treeConentFn(createElement, {node, data, store}){
        var _this = this;
        return createElement('span', [
          createElement('span', node.label),
          createElement('span', {attrs: {class: "btnSpan posiRight"}}, [
            createElement('span', {
              attrs: {class: ""}, on: {
                click: function (e) {
                  var e = e || event;
                  e.stopPropagation();
                  _this.addChildren(data);
                }
              }
            }, [
              createElement('span', {attrs: {class: "iconfont addChildrenIcon"}}, ''),
              createElement('span', {attrs: {class: ""}}, '新增子类')
            ]),
            createElement('span', {
              attrs: {class: ""}, on: {
                click: function (e) {
                  var e = e || event;
                  e.stopPropagation();
                  _this.updateFn(node, data);
                }
              }
            }, [
              createElement('span', {attrs: {class: "iconfont updateIcon"}}, ''),
              createElement('span', {attrs: {class: ""}}, '修改')
            ]),
            createElement('span', {
              attrs: {class: ""}, on: {
                click: function (e) {
                  var e = e || event;
                  e.stopPropagation();
                  _this.stickFn(data);
                }
              }
            }, [
              createElement('span', {attrs: {class: "iconfont stickIcon"}}, ''),
              createElement('span', {attrs: {class: ""}}, '置顶')
            ]),
            createElement('span', {
              attrs: {class: ""}, on: {
                click: function (e) {
                  var e = e || event;
                  e.stopPropagation();
                  _this.deleteFn(data);
                }
              }, "class": {
                "noActive": data.hasChildren - 1
              }
            }, [
              createElement('span', {attrs: {class: "iconfont deleteIcon"}}, ''),
              createElement('span', {attrs: {class: ""}}, '删除')
            ])
          ])
        ])
      },
      iconTextFn(objClassName, text){
        let i = 0, Dobj = document.getElementsByClassName(objClassName);
        for (; i < Dobj.length; i++) {
          Dobj[i].innerHTML = text;
        }
        ;
      },
      queryTree(){
	      	this.axios({
			        method: 'post',
			       	url: "/v3/goods/categorys/queryTree"
			      }).then((res) => {
			          this.treeData = res.data;
			      }).catch((err)=>{
			          this.Public.openError(this,err.response.data)
			  		});
	      },
    },
    created(){
			this.queryTree();
    },
    mounted(){
      this.iconTextFn("addChildrenIcon", "&#xec52;");
      this.iconTextFn("updateIcon", "&#xe617;");
      this.iconTextFn("stickIcon", "&#xe663;");
      this.iconTextFn("deleteIcon", "&#xec50;");

      document.querySelector(".noWrapUl").style.height = (document.documentElement.clientHeight - 180) + 'px';
      window.onresize = function () {
        if (document.querySelector(".noWrapUl")) {
          document.querySelector(".noWrapUl").style.height = (document.documentElement.clientHeight - 180) + 'px';
        }
      };
    },
    updated(){
      this.iconTextFn("addChildrenIcon", "&#xec52;");
      this.iconTextFn("updateIcon", "&#xe617;");
      this.iconTextFn("stickIcon", "&#xe663;");
      this.iconTextFn("deleteIcon", "&#xec50;");
    }
  }
</script>

<style scoped>
  section {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  div.location {
    flex: 0 0 10px;
    padding: 3px 0 15px 0;
  }

  div.content {
    position: relative;
    flex: 1;
    width: 100%;
    background-color: #fff;
  }

  div.content ul {
    padding: 0 20px 20px 20px;
  }

  .wrapUl > li:not(.noWrapUl) {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e6ecf2;
    transition: .2s;
    background-color: #fff;
  }

  div.content ul.active li {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e6ecf2;
    transition: .2s;
    background-color: #fff;
  }

  div.content ul.active {
    overflow-y: auto;
  }

  div.content ul.active li:hover {
    background-color: #F5F7FC;
  }

  div.content ul.active li:hover div.setBox {
    display: block;
  }

  div.content ul.active li div.setBox {
    display: none;
    padding-right: 10px;
  }

  li p {
    padding-left: 20px;
  }

  .textR {
    text-align: right;
  }

  .font12 {
    font-size: 12px;
  }

  .noWrapUl {
    overflow-y: auto;
  }

  /* start add */

  .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    background-color: rgba(240, 240, 240, 0.2);
    /*background-color: rgba(0, 0, 0, .2);*/
  }

  .specific-search {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: 30px;
    z-index: 1005;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
  }

  .search-title {
    font-size: 16px;
    border: 0;
    color: #415161;
  }

  .form {
    width: 1000px;
    background: #fff;
    margin: 20px 0;
  }

  .search-btn {
    margin-top: 50px;
  }

  .specific-search {
    height: 260px;
  }

  /* end add */

  .fade-enter-active,
  .fade-leave-active {
    transition: .4s;
  }

  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }

  .slideDown-enter-active,
  .slideDown-leave-active {
    transition: .4s;
  }

  .slideDown-enter,
  .slideDown-leave-active {
    opacity: 0;
  }

  div.content ul li.title {
    font-size: 14px;
    background-color: #EEF1F9;
  }
</style>
